import { defineStore } from 'pinia'
import { useColorMode, useDark, useLocalStorage } from '@vueuse/core'
import type { Color } from '@/types/colors'
import { colorRadius } from '@/lib/colors'

const allColors: Color[] = [
  'zinc',
  'rose',
  'blue',
  'green',
  'orange',
  'red',
  'slate',
  'stone',
  'gray',
  'neutral',
  'yellow',
  'violet',
]

export const RADII: number[] = [0, 0.25, 0.5, 0.75, 1]

export const useThemeStore = defineStore('theme', {
  state: () => ({ 
    mode: "" as any,
    isDark: false as any,
    allColors,
    RADII,
    radius: 0.5 as number | null
  }),
  getters: {
    //double: (state) => state.count * 2,
  },
  actions: {
    // 初始化主题
    initTheme() {
      // 模式 const { system, store } = useColorMode()
      this.mode = useColorMode({
        // attribute: 'theme',
        modes: {
          zinc: 'theme-zinc',
          rose: 'theme-rose',
          blue: 'theme-blue',
          green: 'theme-green',
          orange: 'theme-orange',
          red: 'theme-red',
          slate: 'theme-slate',
          stone: 'theme-stone',
          gray: 'theme-gray',
          neutral: 'theme-neutral',
          yellow: 'theme-yellow',
          violet: 'theme-violet',
        },
      })
      // 黑暗模式
      this.isDark = useDark()
      // 设置曲率
      const radius = useLocalStorage('radius', null)
      console.log("init info", radius.value, this.mode)
      if (radius.value) {
        this.setRadius(Number(radius.value))
      } else {
        this.setRadius(0.5)
      }
    },
    // 设置主题
    setTheme(color: Color) {
      if (!this.mode) {
        console.log("还未初始化主题")
        this.initTheme()
      }
      // 重置弯曲程度
      const radius = colorRadius[color]
      this.setRadius(radius)
      // 模式
      this.mode = color
    },
    // 
    setRadius(r: number) {
      document.documentElement.style.setProperty('--radius', `${r}rem`)
      this.radius = r
      localStorage.setItem('radius', r.toString())
    }
  },
})